<template>
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical-demo"
      background-color="#fff"
      text-color="#000"
      active-text-color="#409EFF"
    >
      <el-sub-menu v-for="item,index in menuItems" :key="item.id" :index="index">
        <!-- 自定义标题部分 -->
        <template #title>
          <div class="sub-menu-title">
            <span>{{ item.title }}</span>
            <div
              class="drag-area"
              @dragover.prevent
              @drop="(event) => handleDrop(event, item.id)"
            >
              <span class="drag-icon">☰</span>
            </div>
          </div>
        </template>
  
        <!-- 可拖拽的子菜单项 -->
        <draggable
          v-model="item.subItems"
          animation="500"
          handle=".drag-icon"
          group="sub-items"
          itemKey="id"
          @start="(event) => onDragStart(event, index)"
          @end="onDragEnd"
        >
          <template #item="{element}">
            <el-menu-item :index="element.id">
              <span class="drag-icon">☰</span>
              {{ element.name }}
            </el-menu-item>
          </template>
        </draggable>
      </el-sub-menu>
    </el-menu>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { ElMenu, ElSubMenu, ElMenuItem } from 'element-plus';
  import draggable from 'vuedraggable';
  
  const menuItems = ref([
    { id: '1', title: '菜单 1', subItems: [{ id: '1-1', name: '子菜单 1-1' }, { id: '1-2', name: '子菜单 1-2' }] },
    { id: '2', title: '菜单 2', subItems: [{ id: '2-1', name: '子菜单 2-1' }] },
  ]);
  const dragged = ref('');
  const menuIndex = ref('');
  const activeMenu = ref('1');
  
  function handleDrop(event, menuId) {
    const draggedItemId = dragged.value; // 源子菜单id
    console.log(menuItems.value[menuIndex.value])
    const draggedsubItems = menuItems.value[menuIndex.value].subItems // 源菜单
    const draggedItem = draggedsubItems.find(subItem => subItem.id === draggedItemId)//源子菜单

    const items = menuItems.value.find(menu => menu.id === menuId) //目标菜单
    // 将源子菜单放入目标菜单下
    if (draggedItem) {
        items.subItems.push(draggedItem);
    }
    //从源子菜单删除
    if (draggedItem) {
        console.log("draggedsubItems",draggedsubItems)
        const draggedItemIndex =  draggedsubItems.findIndex(subItem => subItem.id === draggedItemId);
        if (draggedItemIndex > -1) {
            draggedsubItems.splice(draggedItemIndex, 1);
        }
    }
    
  }
  
  function onDragStart(event,index) {
    console.log(event.item.__draggable_context)
    dragged.value = event.item.__draggable_context.element.id
    menuIndex.value = index
    // event.originalEvent.dataTransfer.setData('text/plain', event.item.__draggable_context.element.id); // 将拖拽起始项的ID存储在dataTransfer中
  }
  
  function onDragEnd(event) {
    console.log('拖拽结束', event);
  }
  </script>
  
  <style scoped>
  .sub-menu-title {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  
  .drag-area {
    margin-left: auto;
    padding: 5px;
    cursor: move;
  }
  
  .drag-icon {
    cursor: move;
    margin-right: 10px;
  }
  </style>